<!DOCTYPE html>
<html>
<head>
<link
	href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
	rel="stylesheet" type="text/css" />

<link rel="icon" type="image/png" href="/images/epoolSmall.png" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.4/themes/eggplant/jquery-ui.css" />

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script
	src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

#map-canvas {
	width: 800px;
	height: 700px;
}

body {
	font-family: arial; /* Font */
	font-size: 12px; /* Font Size */
}
</style>

<script>
	var cannabisImage = {
		url : 'cannabis.png',
		// This marker is 20 pixels wide by 32 pixels tall.
		size : new google.maps.Size(32, 32),
		scaledSize : new google.maps.Size(30, 30),
		// The origin for this image is 0,0.
		origin : new google.maps.Point(0, 0),
		// The anchor for this image is the base of the flagpole at 0,32.
		anchor : new google.maps.Point(0, 32)
	};
	var thbImage = {
		url : 'thb.png',
		size : new google.maps.Size(32, 32),
		scaledSize : new google.maps.Size(30, 30),
		origin : new google.maps.Point(0, 0),
		anchor : new google.maps.Point(0, 32)
	};

	var drugsImage = {
		url : 'drugs.png',
		size : new google.maps.Size(32, 32),
		scaledSize : new google.maps.Size(30, 30),
		origin : new google.maps.Point(0, 0),
		anchor : new google.maps.Point(0, 32)
	};

	var geocoder;
	var map;
	var infowindow = new google.maps.InfoWindow();

	var threats = [];
	var places = [];
	//var popup_content = [ /* all your popup_content */];
	//var address = [/* all of your addresses */];
	var address_position = 0;

	var timeout = 600;

	function initialize() {

		geocoder = new google.maps.Geocoder();
		var latlng = new google.maps.LatLng(53.37674, -1.468016);
		var myOptions = {
			zoom : 6,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.SATELLITE
		}
		map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);

		 //jQuery.getJSON("concepts7.json", function(data) {
			 jQuery.getJSON("conceptsN0.json", function(data) {
		 
		//jQuery.getJSON("concepts8small.json", function(data) {

			jQuery.each(data, function(key, val) {
				console.log("in jqe");
				jQuery.each(val, function(index, threat) {

					var address2 = threat.attributes.location;
					var dr = threat.attributes.drugreference;
					var obj = threat.objects;
					threats.push(threat);

				});
			});

			console.log("threats size " + threats.length);
			addMarker(address_position);
		});
	}

	function addMarker(position) {

		geocoder
				.geocode(
						{
							'address' : threats[position].attributes.location
						},
						function(results, status) {
							if (status == google.maps.GeocoderStatus.OK) {
								places[position] = results[0].geometry.location;
								console.log("postition " + position +  " places[position] "
										+ places[position])
							
								var address2 = threats[position].attributes.location;
								var dr = threats[position].attributes.drugreference;
								var obj = threats[position].objects;

								var threatImage;
								if (dr == "cannabis") {
									threatImage = cannabisImage;
								} else
									threatImage = drugsImage;

								var infoString = '<p style="color:blue;"> Description: <b>'
										+ dr
										+ '</b></p>'
										+ '<p style="color:purple;"> location in json data: <b> '
										+ address2
										+ '</b></p>'
										+ '<p style="color:purple;"> Google geocoded location: <b> '
										+ results[0].formatted_address
										+ '</b></p>'
										+ '<p style="color:purple;"> Google partial match value: <b>'
										+ results[0].partial_match
										+ '</b></p>'
										+ '<p style="color:green;"> Objects: <b>'
										+ obj + '</b></p>';

								var marker = new google.maps.Marker({
									position : places[position],
									map : map,
									icon : threatImage,
									title : dr
								});

								google.maps.event
										.addListener(
												marker,
												'click',
												function() {
													if (!infowindow) {
														infowindow = new google.maps.InfoWindow();
													}
													infowindow
															.setContent(infoString);													
													infowindow
															.open(map, marker);
												});
							} else {
								if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
									console.log("over limit");
									setTimeout(function() {
										addMarker(position);
									}, (timeout * 3));
								}
							}
							address_position++;
							if (address_position < threats.length) {
								setTimeout(function() {
									addMarker(address_position);
								}, (timeout));
							}
						});
	}
</script>

</head>
<body onload="initialize()">
	<h1>Organised Crime Visual Alarm Tool</h1>
	<p>OC threats from FCA analysis</p>

	<div id="map_canvas"
		style="height: 90%;  border: 1px solid black;"></div>
</body>
</html>